<template>
  <div>
  <div style="box-shadow: 0 0 10px rgba(0,0,0,.1); padding: 10px 20px; border-radius: 5px; margin-bottom: 10px">
    {{user.name}}，欢迎进入洗衣机报修服务平台
  </div>



    <div>
      <el-carousel :interval="5000" arrow="always" height="257px">
        <el-carousel-item v-for="item in images" :key="item.src">
          <img :src="item.src" alt="" class="carousel-image" />
        </el-carousel-item>
      </el-carousel>
    </div>



<div>
    <div style="display: flex; margin: 15px 0">

      <el-card style="width: 50%">
        <div style="margin-bottom: 15px; font-size: 20px; font-weight: bold">系统公告</div>
        <el-collapse v-model="activeName" accordion>
          <el-collapse-item  v-for="(item, index) in notices" :key="item.id" :name="index + ''">
            <template slot="title">
              <div style="display: flex; align-items: center; width: 100%">
                <h4 style="flex: 1">{{ item.title }}</h4>
                <div style="width: 150px; color: #888">{{ item.time }}</div>
              </div>
            </template>
            <div v-html="item.content"></div>
          </el-collapse-item>
        </el-collapse>
      </el-card>

    </div>
</div>





  </div>
</template>

<script>
export default {
  name: "Home",
  data(){
    return {
    user: JSON.parse(localStorage.getItem('honey-user')||'{}'),
      notices: [],
      images: [
        { src: require('@/assets/pic1.jpg') },
        { src: require('@/assets/pic2.jpg') },
        { src: require('@/assets/pic4.png') },
      ],
      activeName: '0'
    }
  },
  created(){
  this.loadNotice()
  },
  methods: {
    loadNotice(){
    this.$request.get('/notice/selectUserData').then(res =>{
      this.notices = res.data
    })
    }
  }
}
</script>

<style scoped>

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.carousel-image {
  width: 100%; /* 图片宽度设置为100%，以适应容器宽度 */
  height: auto; /* 高度自适应，保持图片比例 */
  display: block; /* 移除图片底部的空白空间 */
}



</style>